<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import NavBar from '../components/NavBar.vue'

// 接口定义
interface Card {
  aidesid: number
  aidesName: string
  aidesImg: string
  description: string
  usertotal: number
  classifyid: number
  createid: number
}

// 常量
const CACHE_KEY = 'aiades_data'

// 组件状态
const router = useRouter()
const searchResults = ref<Card[]>([])

// 返回上一页
const goBack = () => {
  router.back()
}

// 从缓存加载搜索结果
const loadSearchResults = () => {
  try {
    const cache = localStorage.getItem(CACHE_KEY)
    if (!cache) {
      console.log('没有找到缓存数据')
      return
    }

    const parsedData = JSON.parse(cache)
    console.log('原始缓存数据:', parsedData)
    
    // 检查数据结构并提取数组
    let resultData
    if (Array.isArray(parsedData)) {
      resultData = parsedData
    } else if (parsedData.data && Array.isArray(parsedData.data)) {
      resultData = parsedData.data
    } else if (parsedData[0]) {  // 如果是单个对象
      resultData = [parsedData]
    }

    if (resultData && resultData.length > 0) {
      searchResults.value = resultData.map(item => ({
        aidesid: item.aidesId || item.aidesid,
        aidesName: item.aidesName,
        aidesImg: item.aidesImg,
        description: item.description,
        usertotal: item.usertotal || 0,
        classifyid: item.classifyId || item.classifyid,
        createid: item.createId || item.createid
      }))
      console.log("处理后的搜索结果:", searchResults.value)
    } else {
      console.log('没有搜索结果数据')
    }
  } catch (error) {
    console.error("加载搜索结果失败:", error)
  }
}

// 点击卡片跳转
const handleCardClick = (card: Card) => {
  router.push({
    path: '/draw-chat',
    query: {
      title: card.aidesName
    }
  })
}

// 在组件挂载时加载数据
onMounted(() => {
  loadSearchResults()
})

// 监听路由变化，当路由发生变化时重新加载数据
watch(router.route, () => {
  loadSearchResults()
})
</script>

<template>
  <div class="search-result-page">
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <div class="back-btn" @click="goBack">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
        </svg>
      </div>
      <div class="title">搜索结果</div>
      <div class="placeholder"></div>
    </div>

    <!-- 搜索结果列表 -->
    <div class="result-container">
      <div v-if="!searchResults.length" class="no-result">
        <div class="no-result-text">暂无搜索结果</div>
      </div>
      
      <div v-else class="card-grid">
        <div
          v-for="card in searchResults"
          :key="card.aidesid"
          class="card"
          @click="handleCardClick(card)"
        >
          <div 
            class="card-image" 
            :style="{ backgroundImage: card.aidesImg ? `url(${card.aidesImg})` : 'none' }"
          >
            <div class="card-users">
              <i class="fire-icon"></i>
              {{ card.usertotal }}
            </div>
          </div>
          <div class="card-content">
            <h3>{{ card.aidesName || '未命名' }}</h3>
            <p>{{ card.description || '暂无描述' }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.search-result-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-top: env(safe-area-inset-top);
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: linear-gradient(90deg, #f5a8f0 0%, #7ecfff 100%);
  color: white;
}

.back-btn {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.title {
  font-size: 17px;
  font-weight: 500;
}

.placeholder {
  width: 24px;
}

.result-container {
  padding: 76px 12px 12px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-2px);
}

.card-image {
  height: 160px;
  background-size: cover;
  background-position: center;
  position: relative;
  background-color: #f5f5f5;
}

.card-users {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-content {
  padding: 12px;
}

.card-content h3 {
  margin: 0;
  font-size: 15px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-content p {
  margin: 0;
  font-size: 13px;
  color: #666;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.fire-icon {
  width: 14px;
  height: 14px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

.no-result {
  text-align: center;
  padding: 40px 0;
  color: #999;
}
</style> 